import { connect } from "react-redux";
import { getSquare } from './../../action/action';
import "./square.scss"
import Zmage from 'react-zmage';
@connect(
    ({ square }) => square
)
export class Square extends React.Component {
    constructor(props) {
        super(props)
    }
    componentDidMount() {
        let { dispatch } = this.props;
        let id = this.props.match.params.id;
        dispatch(getSquare(id))
    }
    render() {
        let { squareData } = this.props;
        let domList = [];
        if (squareData) {
            squareData.itemList.map((item, index) => {
                let tagList = item.data.content.data.tags.map((item, index) => (
                    <span key={index}>{item.name}</span>
                ))
                domList.push(
                    <li key={index}>
                        <div className="info">
                            <div className="via">
                                <img src={item.data.content.data.owner.avatar} />
                            </div>
                            <div className="msg">
                                <h4>{item.data.content.data.owner.nickname}</h4>
                                <p><span>发布：</span>{item.data.content.data.title}</p>
                            </div>
                        </div>
                        <p>{item.data.content.data.description}</p>
                        <div className="bank-tip">
                            {tagList}
                        </div>
                        <div className="imgBox">
                            <Zmage src={item.data.content.data.cover.detail} preset="mobile" backdrop="#fff" edge={0} hotKey={{
                                // 关闭（ESC）
                                close: true,
                                // 缩放（空格）
                                zoom: true,
                                // 翻页（左右）
                                flip: true,
                            }} controller={{
                                // 关闭按钮
                                close: true,
                                // 缩放按钮
                                zoom: true,
                                // 旋转按钮
                                rotate: true,
                                // 翻页按钮
                                flip: true,
                                // 多页指示
                                pagination: true,
                            }} />
                        </div>
                        <div className="inter">
                        </div>
                    </li>
                )
            })

            return (
                <div className="square">
                    <div className="bank-box">
                        <ul>
                            {domList}
                        </ul>
                    </div>
                </div>
            )
        } else {
            return (
                <div></div>
            )
        }
    }
}